<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>请假流程</title>
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>
    <script src="axios.min.js"></script>
</head>

<style>
    div {
        margin-top: 50px;
    }
</style>

<body style="text-align: center">
<div>
	<h2>请假申请</h2>
	<form>
		<input type="text" id="username" name="username" placeholder="请假人"/><br>
		<p>
		<select id="select_day">
			<option value="一天之内">一天之内</option>
	        <option value="三天左右">三天左右</option>
	        <option value="一周以上">一周以上</option>
		</select><br><p>
		请假事由<p>
		<textarea id="reason" rows="8px" cols="20px"></textarea><p>

		<input type="button" id="sub" name="sub" value="提交"/>
	</form>
	<select id="assignee">
		<option>辅导员</option>
		<option>学生工作处</option>
		<option>领导</option>
	</select>
	<!-- <input type="button" id="chaxun" value="查询"/> -->
	<input type="button" id="search" value="查询"/> 
</div>
	<div>
		<table border="2">
        <thead>
        <tr>
        	<th>请假人</th>
        	<th>时间</th>
        	<th>事由</th>
            <th>taskId</th>
            <th>taskName</th>
            <th>assignee</th>
            <th>processInstanceId</th>
            <th>executionId</th>
            <th>description</th>
            <th>taskDefinitionId</th>
            <th>processDefinitionId</th>
            <th>操作</th>
            <th>查询历史实例</th>
        </tr>
        </thead>
        <tbody id="taskBody">
        </tbody>
    </table>
	</div>
</body>


<script th:inline="javascript">

$(function () {
    $("#submit").click(function () {
        console.log("filename:"+$("#fileName").val());
        $.ajax({
            type: 'GET',
            url: '/flowable/deploy',
            data: {"fileName" : $("#fileName").val()},
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log("出错了！！:" + data);
            }
        });
    })//submit

    $("#search").click(function () {
        search();
    })//search
    //查询只获取任务id和name的时候使用此方法
    $("#chaxun").click(function () {
    	console.log($("#assignee").val());
    	$.ajax({
            type: 'get',
            url: 'http://localhost:8080/flowable/queryTask',
            data: {"assignee":$("#assignee").val()},
            success: function (data) {
                console.log("全部"+data);
                console.log("部分"+data[0]+data.length);	
                var jsonArray=JSON.stringify(data);
                console.log("******************");
                console.log("全部"+jsonArray);
                console.log("部分"+jsonArray[0]+data.length);
                console.log("******************");
                var task=eval('('+jsonArray+')');
                for(var j=0;j<task.length;j++){
                	console.log("id="+task[j].id+"  name="+task[j].name);
                }
                var html = "";                       	             
                for(var i=0; i<task.length; i++) {
                    html += "<tr>" +
                        "<td>" + task[i].id + "</td>" +
                        "<td>" + task[i].name + "</td>" +                    
                        "<td><button onclick=\"agree('"+ task[i].id +"')\">同意</button>" +
                        "<button onclick=\"reject('"+task[i].id  +"')\">驳回</button>" +
                        "</td>" +
                        
                        "</tr>";
                }
                $("#taskBody").html(html);
            },
            error: function (data) {
                console.log("出错了！！:" + data);
            }
        });
    })//chaxun
    
    $("#sub").click(function () {
    	console.log($("#username").val()+$("#select_day").val()+$("#reason").val());
    	$.ajax({
            type: 'Post',
            url: 'http://localhost:8080/flowable/add',
            data: {"username" : $("#username").val(),"days":$("#select_day").val(),"reason":$("#reason").val()},
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log("出错了！！:" + data);
            }
        });
    })
        
})//function

function agree(id) {
    console.log("agree:", id);
    $.ajax({
        type: 'GET',
        url: '/flowable/apply',
        data: {"taskId" : id,"assignee" : $("#assignee").val()},
        success: function (data) {
            //search();
            alert(data+"已审批");
        },
        error: function (data) {
            console.log("出错了！！:" + data);
        }
    });
}//agree

function history(processInstanceId) {
    console.log("processInstanceId:", processInstanceId);
    $.ajax({
        type: 'GET',
        url: '/flowable/history',
        data: {"processInstanceId" : processInstanceId},
        success: function (data) {      
            console.log(data);     
        },
        error: function (data) {
            console.log("出错了！！:" + data);
        }
    });
}//history

function reject(id, executionId, processInstanceId) {
    console.log("reject:", id, executionId, processInstanceId);
    axios({
        method: 'Post',
        url: '/flowable/reject',
        data: {"processInstanceId" : processInstanceId, "executionId" : executionId},
        success: function (data) {
            //search();
            alert("驳回成功！");
        },
        error: function (data) {
            console.log("出错了！！:" + data);
        }
    });
}

function search(){
	console.log($("#assignee").val());
	var username=$("#username").val();
	var days=$("#select_day").val();
	var reason=$("#reason").val();
	console.log("请假人："+username+"天数："+days+"原因："+reason);
    $.ajax({
        type: 'GET',
        url: '/flowable/find',
        data: {"assignee" : $("#assignee").val()},
        success: function (data) {
            console.log(data);
            var html = "";
            for(var i=0; i<data.content.length; i++) {
                html += "<tr>" +
                	"<td>" + username + "</td>" +
                	"<td>" + days + "</td>" +
                	"<td>" + reason + "</td>" +
                    "<td>" + data.content[i].id + "</td>" +
                    "<td>" + data.content[i].name + "</td>" +
                    "<td>" + data.content[i].assignee + "</td>" +
                    "<td>" + data.content[i].processInstanceId + "</td>" +
                    "<td>" + data.content[i].executionId + "</td>" +
                    "<td>" + data.content[i].description + "</td>" +
                    "<td>" + data.content[i].taskDefinitionId + "</td>" +
                    "<td>" + data.content[i].processDefinitionId + "</td>" +
                    "<td><button onclick=\"agree('"+ data.content[i].id +"','"+ data.content[i].executionId +"','"+ data.content[i].processInstanceId +"')\">同意</button>" +
                    "<button onclick=\"reject('"+ data.content[i].id +"','"+ data.content[i].executionId +"','"+ data.content[i].processInstanceId +"')\">驳回</button>" +
                    "</td>" +
                    "<td><button onclick=\"history('"+ data.content[i].processInstanceId +"')\">查询历史实例</button>" +"</td>"+
                    "</tr>";
            }

            $("#taskBody").html(html);
        },
        error: function (data) {
            console.log("出错了！！:" + data);
        }
    });
}


</script>

</html>